<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="<c:url value="/assets/css/tailwind.output.css"/>" rel="stylesheet"/>
    <title>default-panel</title>
</head>
<body class="bg-gray-100 font-sans h-screen">

<!-- 轮播图管理 -->
<div class="container mx-auto p-4">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold text-gray-700">轮播图管理</h2>
        <button onclick="openModal()" class="btn btn-primary">新增轮播图</button>
    </div>

    <div class="overflow-x-auto bg-white shadow-md rounded-lg">
        <table class="table table-zebra w-full">
            <thead>
            <tr>
                <th>图片ID</th>
                <th>图片预览</th>
                <th>标题</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="carouselTableBody">
            <!-- 轮播图数据将通过 JavaScript 动态生成 -->
            </tbody>
        </table>
    </div>
</div>

<!-- 模态框 -->
<div id="carouselModal" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box">
        <h2 class="text-xl font-semibold text-gray-700 mb-4" id="modalTitle">新增轮播图</h2>
        <form id="carouselForm">
            <div class="mb-4">
                <label for="carouselId" class="block text-sm font-medium text-gray-600">图片ID</label>
                <input type="text" id="carouselId" class="input input-bordered w-full" placeholder="请输入图片ID"
                       required>
            </div>
            <div class="mb-4">
                <label for="carouselImage" class="block text-sm font-medium text-gray-600">图片上传</label>
                <input type="file" id="carouselImage" class="input input-bordered w-full" accept="image/*" required>
            </div>
            <div class="mb-4">
                <label for="carouselTitle" class="block text-sm font-medium text-gray-600">标题</label>
                <input type="text" id="carouselTitle" class="input input-bordered w-full" placeholder="请输入标题"
                       required>
            </div>
            <div class="flex justify-end">
                <button type="button" class="btn btn-secondary mr-2" onclick="closeModal()">取消</button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </form>
    </div>
</div>

<script>
    // 模拟数据
    const carouselData = [
        {id: 1, image: 'https://via.placeholder.com/300', title: '轮播图1'},
        {id: 2, image: 'https://via.placeholder.com/300', title: '轮播图2'},
        {id: 3, image: 'https://via.placeholder.com/300', title: '轮播图3'},
    ];

    // 渲染轮播图列表
    function renderCarouselTable() {
        const tableBody = document.getElementById('carouselTableBody');
        tableBody.innerHTML = '';

        carouselData.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                    <td>${item.id}</td>
                    <td><img src="${item.image}" alt="${item.title}" class="w-32 h-32 object-cover"></td>
                    <td>${item.title}</td>
                    <td>
                        <button onclick="editCarousel(${item.id})" class="btn btn-sm btn-warning">编辑</button>
                        <button onclick="deleteCarousel(${item.id})" class="btn btn-sm btn-error">删除</button>
                    </td>
                `;
            tableBody.appendChild(row);
        });
    }

    // 打开模态框
    function openModal() {
        document.getElementById('carouselModal').classList.add('modal-open');
        document.getElementById('modalTitle').innerText = '新增轮播图';
        document.getElementById('carouselForm').reset();
    }

    // 关闭模态框
    function closeModal() {
        document.getElementById('carouselModal').classList.remove('modal-open');
    }

    // 编辑轮播图
    function editCarousel(id) {
        const carousel = carouselData.find(item => item.id === id);
        if (carousel) {
            document.getElementById('carouselModal').classList.add('modal-open');
            document.getElementById('modalTitle').innerText = '编辑轮播图';
            document.getElementById('carouselId').value = carousel.id;
            document.getElementById('carouselImage').value = ''; // 清空文件输入框
            document.getElementById('carouselTitle').value = carousel.title;
        }
    }

    // 删除轮播图
    function deleteCarousel(id) {
        if (confirm('确定删除该轮播图吗？')) {
            const index = carouselData.findIndex(item => item.id === id);
            if (index > -1) {
                carouselData.splice(index, 1);
                renderCarouselTable();
            }
        }
    }

    // 提交表单
    document.getElementById('carouselForm').addEventListener('submit', function (event) {
        event.preventDefault();

        const id = parseInt(document.getElementById('carouselId').value);
        const title = document.getElementById('carouselTitle').value;
        const image = document.getElementById('carouselImage').files[0];

        if (image) {
            const reader = new FileReader();
            reader.onload = function (e) {
                const imageData = e.target.result;
                const newCarousel = {id: id || carouselData.length + 1, image: imageData, title};

                if (id) {
                    const index = carouselData.findIndex(item => item.id === id);
                    if (index > -1) {
                        carouselData[index] = newCarousel;
                    }
                } else {
                    carouselData.push(newCarousel);
                }

                renderCarouselTable();
                closeModal();
            };
            reader.readAsDataURL(image);
        }
    });

    // 初始化页面
    renderCarouselTable();
</script>

</body>
</html>
